<template>

	<div>
		<el-dialog title="上下架信息" :visible.sync="dialogVisible" width="500px" :before-close="handleClose"
			:close-on-click-modal="false">
			<el-form :inline="false" :model="formInline" ref="up-and-down-form" :rules="formRules"
				class="demo-form-inline" v-loading="loadingForm" label-width="100px">


				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item label="上下架状态:" prop="productIntroduction">
							<el-radio-group v-model="formInline.productIntroduction">
								<el-radio label="1">上架</el-radio>
								<el-radio label="0">下架</el-radio>
							</el-radio-group>
							<div style="margin-top: 12px;">
								<el-checkbox v-model="formInline.showLastOnshowTime"
									@change="formInline.lastOnshowTime = ''">启动定时下架
								</el-checkbox>
								<el-date-picker style="margin-left: 12px;" :disabled="!formInline.showLastOnshowTime"
									v-model="formInline.lastOnshowTime" type="datetime" placeholder="选择定时下架时间"
									size="mini" />
							</div>
						</el-form-item>
					</el-col>
				</el-row>

			</el-form>


			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" :disabled="loadingForm" @click="handleSubmit" :loading="btnLoading">确 定
				</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		findWcGoodsGroundingGood,
		findWcGoods
	} from "@/api/culturalCreativity/shopping.js";
	export default {
		data() {
			return {
				title: '',
				id: null,
				dialogVisible: false,
				formRules: {
					f1: {
						required: false,
						message: '',
						trigger: 'none'
					}
				},
				formInline: {},
				loadingScreen: null,
				loadingForm: false,
				fileName: '',
				btnLoading: false,
			}
		},
		methods: {
			async init(id) {
				try {
					this.resetFrom();
					this.dialogVisible = true;
					if (this.$refs['up-and-down-form']) this.$refs['up-and-down-form'].resetFields();
					console.log('查看id：',id)
					if (`${id}`.split(",").length == 1) {
						this.loadingForm = true;
						let res = await findWcGoods(id);
						for (let i in this.formInline) {
							this.formInline[i] = res.data[i];
						};
					};
					this.formInline.goodsIdList = id;
					this.formInline.showLastOnshowTime = res.data.lastOnshowTime ? true : false
					this.loadingForm = false;
				} catch (e) {
					console.error('错误：',e)
					this.loadingForm = false;
					//TODO handle the exception
				}
			},
			resetFrom() {
				this.formInline = {
					fromOnshowTime: "",
					goodsIdList: "",
					lastOnshowTime: "",
					productIntroduction: "",
					showLastOnshowTime: false
				}
			},
			handleClose() {
				this.dialogVisible = false;
			},
			async handleSubmit() {
				try {
					this.btnLoading = true;
					let formInline = {
						...this.formInline
					};
					delete formInline.showLastOnshowTime;
					formInline.goodsIdList = `${formInline.goodsIdList}`.split(",");
					let res = await findWcGoodsGroundingGood(formInline);
					this.$message.success("操作成功");
					this.btnLoading = false;
					this.dialogVisible = false;
					this.$emit("success");
				} catch (e) {
					console.log("出错：", e)
					this.btnLoading = false;
				}
				// this.$refs['up-asnd-down-form'].validate(async valid => {});
			},
		},
		created() {
			this.resetFrom();
		},
		computed: {}
	}
</script>
<style lang="scss" scoped>
	.width100 {
		width: 590px;
	}

	.cell-input {
		width: 200px;
	}

	.up-file-wrappar {
		display: flex;
		align-items: center;
	}

	.total-day {
		display: inline-block;
		height: 36px;
		width: 40px;
		margin: 0 6px;
		text-align: center;
		border-radius: 4px;
		border: 1px solid #DCDFE6;
		padding: 0 15px;
		box-sizing: border-box;
	}

	.up-file-name {
		display: inline-block;
		height: 36px;
		min-width: 555px;
		text-align: left;
		line-height: 36px;
		box-sizing: border-box;
		padding: 0 15px;
		border: 1px solid #DCDFE6;
		border-radius: 4px;
		color: #606266;
		font-size: inherit;

		.text {
			display: -webkit-box;
			overflow: hidden;
			white-space: normal !important;
			text-overflow: ellipsis;
			word-wrap: break-word;
			-webkit-line-clamp: 1; //行数
			-webkit-box-orient: vertical;
			max-width: 555px;
		}
	}
</style>
